<template>
  <div class="day3">
    <h2>自定义指令https://juejin.cn/post/6844903537625808904</h2>
    <input type="text" v-focus="{ h: 20, w: 100 }" />
    <div><button v-debounce="debounceClick">防抖</button></div>
    <div v-color="'red'">全局指令指定颜色1</div>
    <div v-color="'#777'">全局指令指定颜色2</div>
    <h2>计算属性https://juejin.cn/post/7096874418160271373</h2>
    <p>计算属性第一种----姓名：{{ fullName }}</p>
    <p>
      计算属性第二种区别计算属性默认只有 getter，不过在需要时你也可以提供一个
      setter
    </p>
    <p>计算属性第二种----姓名：{{ fullName2 }}</p>
    <el-button type="primary" size="small" @click="changeFullName2"
      >改变fullName2得值</el-button
    >
    <el-divider></el-divider>
    <h2>侦听器</h2>
    <p>第一种侦听器写法绑定的值msg：{{ msg }}</p>
    <el-button type="primary" size="small" @click="msg = '123'"
      >改变msg得值</el-button
    >
    <p>第二种侦听器写法绑定的值msg2：{{ msg2 }}</p>
    <el-button type="primary" size="small" @click="msg2 = '456'"
      >改变msg2得值</el-button
    >
    <p>第二种侦听器写法深度监听</p>
    <p>wobj:{{ wobj }}</p>
    <el-button
      type="primary"
      size="small"
      @click="wobj = { name: '李四', age: 20 }"
      >改变wobj得值</el-button
    >
    <el-button type="primary" size="small" @click="wobj.age++"
      >改变wobj对象age得值</el-button
    >
    <p>当改变wobj对象age得值，如果deep为fasle，无法</p>
  </div>
</template>

<script>
export default {
  name: 'day-3',
  data() {
    return {
      firstName: 'Foo',
      lastName: 'Bar',
      firstName2: '李',
      lastName2: '四',
      msg: '1',
      msg2: '2',
      wobj: { name: '张三', age: 20 }
    }
  },
  // 侦听器
  watch: {
    // 第一种写法默认进入页面不监听，点击改变msg得值监听
    msg(newVal, oldVal) {
      console.log('第一种watch写法监听到了')
      console.log(newVal, oldVal)
    },
    msg2: {
      immediate: true, // 进入页面监听，刷新， console控制台打印第二种watch写法监听到了
      deep: true, // 深度监听
      handler(newVal, oldVal) {
        console.log('第二种watch写法监听到了')
        console.log(newVal, oldVal)
      }
    },
    wobj: {
      immediate: true, // 进入页面监听，刷新， console控制台打印第二种watch写法监听到了
      deep: false, // 深度监听
      handler(newVal, oldVal) {
        console.log('第二种侦听器写法深度监听到了')
        console.log(newVal, oldVal)
      }
    }
  },
  // 计算属性
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName
    },
    fullName2: {
      // getter
      get: function() {
        return this.firstName2 + ' ' + this.lastName2
      },
      // setter
      set: function(newValue) {
        const names = newValue.split(' ')
        this.firstName2 = names[0]
        this.lastName2 = names[names.length - 1]
      }
    }
  },
  // 局部 定义自定义指令
  directives: {
    // 属性名：指令的名称
    // 属性值：指令配置对象
    focus: {
      inserted(el, binding) {
        console.log('binding: ', binding)
        // binding 指令的信息对象
        // 其中有一个 value 就是指令的值
        el.style.width = binding.value.w + 'px'
        el.style.height = binding.value.h + 'px'
        el.focus()
      }
    }
  },
  methods: {
    debounceClick() {
      console.log('只触发一次')
    },
    changeFullName2() {
      this.fullName2 = '张 三'
      // 第一种写法不会生效它只有 getter
      // this.fullName = '张 三'
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
